<template>
  <div v-show="total">
    <input type="checkbox" :checked="isAll" @change="checkALL" />
    <span>已完成<strong>{{doneTodo}}</strong>/全部<strong>{{total}}</strong></span>
    <button @click="clearAllTodo">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  name: "MyFooter",
  data() {
    return {};
  },
  props:['todos','checkAllTodo','clearAll'],
  methods:{
    checkALL(e){
      console.log(e.target.checked)
      this.checkAllTodo(e.target.checked)
    },
    clearAllTodo(){
      this.clearAll()
    }
  },
  computed: {
    doneTodo(){
      let i=0
      this.todos.forEach(todo => {
        if(todo.done){
          i++
        }
      });
      return i
    },
    total(){
      return this.todos.length
    },
    isAll(){
      return this.doneTodo === this.total && this.total>0
    }
  },
};
</script>

<style lang="scss" scoped>
</style>